<template>
  <div>
    <el-row style="color: white">
      <el-col :span="12"> <div ref='linetest' style="height: 400px;width:650px;"></div></el-col>
      <el-col :span="12"><div ref='bartest' style="height: 400px;width:650px"></div></el-col>
    </el-row>
    <el-row>
      <el-col :span="12"> <div ref='pietest' style="height: 400px;width:650px"></div></el-col>
      <el-col :span="12"><div ref='scattertest' style="height: 350px;width:650px"></div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "JobReport",
  data(){
    return {
      //折线图配置项
      lineOptions:{
        title: {
          text: '折线图测试',
          x: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      },
      //柱状图配置项
      barOptions :{
        title: {
          text: '柱状图测试',
          x: 'left'
        },
        color: ['#12e78c'],
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      },
      //饼图配置项
      pieOptions :{
        title: {
          text: '饼图测试',
          x: 'center',
          y:'bottom'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
      //散点图配置项
      scatterOptions:{
        title:{
          text: '散点图测试',
          x: 'center'
        },
        color: ['#87cefa'],
        xAxis: {},
        yAxis: {},
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            symbolSize: 20,
            data: [
              [10.0, 8.04],
              [8.07, 6.95],
              [13.0, 7.58],
              [9.05, 8.81],
              [11.0, 8.33],
              [14.0, 7.66],
              [13.4, 6.81],
              [10.0, 6.33],
              [14.0, 8.96],
              [12.5, 6.82],
              [9.15, 7.2],
              [11.5, 7.2],
              [3.03, 4.23],
              [12.2, 7.83],
              [2.02, 4.47],
              [1.05, 3.33],
              [4.05, 4.96],
              [6.03, 7.24],
              [12.0, 6.26],
              [12.0, 8.84],
              [7.08, 5.82],
              [5.02, 5.68]
            ],
            type: 'scatter'
          }
        ]
      }
    }
  },
  methods:{
    setLine(){
      let linetestChart = this.$refs.linetest
      //初始化echarts对象
      let lineChart = this.$echarts.init(linetestChart)
      lineChart.setOption(this.lineOptions)
    },
    setBar(){
      let bartestChart = this.$refs.bartest
      //初始化echarts对象
      let barChart = this.$echarts.init(bartestChart)

      barChart.setOption(this.barOptions)
    },
    setPie(){
      let pietestChart = this.$refs.pietest
      //初始化echarts对象
      let pieChart = this.$echarts.init(pietestChart)

      pieChart.setOption(this.pieOptions)
    },
    setScatter(){
      let scattertestChart = this.$refs.scattertest
      //初始化echarts对象
      let scatterChart = this.$echarts.init(scattertestChart)

      scatterChart.setOption(this.scatterOptions)
    }
  },
  mounted() {
    this.setLine()
    this.setBar()
    this.setPie()
    this.setScatter()
  }

}
</script>

<style scoped>
div{
  margin-top: 5px;
}
</style>